<template>
  <section id="banner" ref="banner">
    <section class="btn-list" ref="btnList">
      <a-button v-for="(item,index) in bannerType" @click="getBanner(item.id)"
                :class="active == item.id ? 'is-select':''">
        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" clip-rule="evenodd"
                d="M2.91671 3.33331H17.0834C17.5436 3.33331 17.9167 3.70641 17.9167 4.16665V15.8333C17.9167 16.2935 17.5436 16.6666 17.0834 16.6666H2.91671C2.45647 16.6666 2.08337 16.2935 2.08337 15.8333V4.16665C2.08337 3.70641 2.45647 3.33331 2.91671 3.33331Z"
                stroke="#98A6AD" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
          <path
              d="M6.04175 7.5C6.38693 7.5 6.66675 7.22018 6.66675 6.875C6.66675 6.52982 6.38693 6.25 6.04175 6.25C5.69657 6.25 5.41675 6.52982 5.41675 6.875C5.41675 7.22018 5.69657 7.5 6.04175 7.5Z"
              stroke="#98A6AD" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
          <path
              d="M6.25004 10L8.33337 11.6667L10.8334 8.75L17.9167 14.1667V15.8333C17.9167 16.2936 17.5436 16.6667 17.0834 16.6667H2.91671C2.45647 16.6667 2.08337 16.2936 2.08337 15.8333V14.1667L6.25004 10Z"
              stroke="#98A6AD" stroke-width="1.5" stroke-linejoin="round"/>
        </svg>
        <p>{{ item.name }}</p>
      </a-button>
      <a-button :loading="addLoad">
        <a-upload-dragger
            name="file"
            action="http://119.23.46.241:11900/api/v1/banner"
            method="post"
            :data="{type_id:active}"
            :headers="uploadHeader"
            @change="handleChange"
            accept=".jpg,.jpeg,.png"
        >
          <svg width="20" height="20" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path
                d="M38 21V40C38 41.1046 37.1046 42 36 42H8C6.89543 42 6 41.1046 6 40V12C6 10.8954 6.89543 10 8 10H26.3636"
                stroke="#98a6ad" stroke-width="4" stroke-miterlimit="10" stroke-linecap="round"
                stroke-linejoin="round"/>
            <path d="M12 31.0308L18 23L21 26L24.5 20.5L32 31.0308H12Z" fill="none" stroke="#98a6ad" stroke-width="4"
                  stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M34 10H42" stroke="#98a6ad" stroke-width="4" stroke-miterlimit="10" stroke-linecap="round"
                  stroke-linejoin="round"/>
            <path d="M37.9941 5.79544V13.7954" stroke="#98a6ad" stroke-width="4" stroke-miterlimit="10"
                  stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
          <p>添加轮播图</p>
        </a-upload-dragger>
      </a-button>
    </section>
    <section class="banner-list">
      <a-table
          :row-selection="{
          selectedRowKeys: selectedRowKeys,
          onChange: onSelectChange}"
          :data-source="bannerArr"
          :loading="isLoading"
          :pagination="false"
          :scroll="{ y: 640 }"
          :rowKey="(record, index) => record.id"
          :class="isEmpty ? '' :'banner-empty'"
      >
        <a-table-column key="username" title="预览" data-index="username" align="center" width="250px">
          <template #default="{ record }">
            <a-image
                :width="200"
                :height="150"
                :preview="true"
                :src="record.url"
                fallback=""

            >
              <template #placeholder>
                <section class="loading">
                  <LoadingOutlined/>
                </section>
              </template>
            </a-image>
          </template>
        </a-table-column>
        <a-table-column key="position" title="路径" data-index="url" align="center" width="636px"/>
        <a-table-column key="operation" title="操作" data-index="operation" align="center" width="210px">
          <template #default="{ record }">
            <section class="operation" ref="operation">
              <a-upload-dragger
                  name="file"
                  action="http://119.23.46.241:11900/api/v1/banner/new"
                  method="post"
                  :data="{id:bannerId}"
                  :headers="uploadHeader"
                  @change="handleChange"
                  accept=".jpg,.jpeg,.png"
              >
                <a-button type="primary" @click="editBanner(record)">编辑</a-button>
              </a-upload-dragger>
              <a-button type="primary" danger @click="delBanner(record)">删除</a-button>
            </section>
          </template>
        </a-table-column>
      </a-table>
    </section>
  </section>
  <!--  删除轮播图-->
  <a-modal v-model:visible="visibleDeleteBanner" :footer="null" :closable="false" :getContainer="$refs.banner"
           class="modal" width="310px">
    <section style="text-align: center">
      <h2 class="modal-title">是否删除这张图片</h2>
      <p class="modal-content">点击确认后，不得撤销此操作</p>
    </section>
    <section class="modal-button">
      <a-button type="primary" @click="visibleDeleteBanner=false">取消</a-button>
      <a-button type="primary" @click="delBannerConfirm" :loading="deleteLoad">确定</a-button>
    </section>
  </a-modal>
</template>
<script>
import {defineComponent, getCurrentInstance, ref, reactive, toRefs, onMounted, computed, watch} from 'vue'
import $store from "store/index"
import {message} from "ant-design-vue"
import {InboxOutlined, LoadingOutlined} from '@ant-design/icons-vue'

export default defineComponent({
  name: "banner",
  setup() {
    const {proxy} = getCurrentInstance()
    let bannerArr = ref([]);
    let bannerType = ref([]);
    let isLoading = ref(true)
    let isEmpty = ref(false)
    let deleteLoad = ref(false)
    let addLoad = ref(false)
    let visibleDeleteBanner = ref(false)
    let active = ref(1)
    let activeBannerName = ref("首页轮播图")
    let uploadHeader = ref({})
    let bannerId = ref("")

    const state = reactive({
      selectedRowKeys: [],
      loading: false,
    });
    const hasSelected = computed(() => state.selectedRowKeys.length > 0);
    const onSelectChange = selectedRowKeys => {
      state.selectedRowKeys = selectedRowKeys;
    };

    const editBanner = (record) => {
      bannerId.value = record.id
    }
    const delBanner = (record) => {
      bannerId.value = record.id
      visibleDeleteBanner.value = true
    }
    const delBannerConfirm = () => {
      deleteLoad.value = true
      proxy.$request(proxy.$getRoute(51).route_method, proxy.$getRoute(51).route_url, {id: bannerId.value}).then(res => {
        deleteLoad.value = false
        visibleDeleteBanner.value = false
        getBanner(active.value)
        message.success("删除成功")
      })
    }
    onMounted(() => {
      getBanner(1)
      proxy.$request(proxy.$getRoute(48).route_method, proxy.$getRoute(48).route_url, {}).then(res => {
        bannerType.value = res.data
      })
      let token = $store.state.token
      uploadHeader.value = {
        Authorization: token
      }
    })

    const getBanner = (id) => {
      isLoading.value = true
      bannerArr.value = []
      proxy.$request(proxy.$getRoute(47).route_method, proxy.$getRoute(47).route_url, {type_id: id}).then(res => {
        bannerArr.value = res.data
        isLoading.value = false
        if (!bannerArr.value.length) isEmpty.value = true
      })
      active.value = id
      switch (id) {
        case 1:
          activeBannerName.value = "首页轮播图"
          break
        case 2:
          activeBannerName.value = "默认轮播图"
          break
      }
    }

    const handleChange = (file) => {
      if (file.fileList[0].status == "done") {
        message.success("添加轮播图成功")
        isLoading.value = true
        isEmpty.value = false
        bannerArr.value = []
        proxy.$request(proxy.$getRoute(47).route_method, proxy.$getRoute(47).route_url, {type_id: active.value}).then(res => {
          bannerArr.value = res.data
          isLoading.value = false
          addLoad.value = false
          if (!bannerArr.value.length) isEmpty.value = true
        })
      } else if (file.fileList[0].status == "uploading") {
        addLoad.value = true
      }
    }
    return {
      bannerArr,
      hasSelected,
      ...toRefs(state),
      isLoading,
      isEmpty,
      active,
      bannerId,
      activeBannerName,
      onSelectChange,
      handleChange,
      delBanner,
      getBanner,
      editBanner,
      delBannerConfirm,
      bannerType,
      uploadHeader,
      visibleDeleteBanner,
      deleteLoad,
      addLoad
    }
  },
  components: {
    LoadingOutlined,
  },
})
</script>

<style lang="less">
@selectColor: #6777EF;
#banner {
  .btn-list {
    display: flex;
    gap: 16px;
    margin-bottom: 18px;
  }

  .btn-list > button {
    display: flex;
    align-items: center;
    width: 130px;
    height: 52px;
    border-radius: 6px;
    border: none;
    background: #fff;
    box-shadow: none;
  }

  .btn-list > button:nth-child(3) a {
    display: flex;
    align-items: center;
  }

  .btn-list > button p {
    margin: 0 0 0 4px;
    font-size: 14px;
    font-weight: 400;
    color: #98A6AD;
    line-height: 20px;
    letter-spacing: 0.5px;
  }

  .banner-list {
    border-radius: 8px;
    overflow: hidden;
  }

  .ant-table-thead > tr > th, .ant-table-header {
    font-size: 16px;
    font-weight: 400;
    color: #98A6AD;
    line-height: 19px;
    background: #fff !important;
  }

  .ant-table-tbody > tr > td {
    border: none;
  }

  .ant-table-body {
    overflow-y: auto !important;
  }

  .ant-table {
    font-size: 16px;
    font-weight: 400;
    color: #262626;
    line-height: 19px;
    white-space: nowrap;
  }

  .ant-image {
    cursor: pointer;
  }

  .ant-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .banner-list .ant-checkbox-indeterminate .ant-checkbox-inner::after {
    background: @selectColor;
  }

  .banner-list .ant-checkbox-checked .ant-checkbox-inner {
    border-color: @selectColor;
    background: @selectColor;
  }

  .ant-table-row-cell-break-word {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .loading {
    width: 100%;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
  }

  .operation {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
  }

  .operation button, .btn-list .ant-modal-body button {
    width: 74px;
    height: 36px;
    border-radius: 8px;
    font-size: 13px;
    letter-spacing: 0;
    font-weight: 500;
    color: #FFFFFF;
    line-height: 15px;
  }

  .operation button:first-child, .btn-list .ant-modal-body button:first-child {
    background: #6777EF;
  }

  .operation > button:last-child, .btn-list .ant-modal-body button:last-child {
    background: #EB5757;
  }

  .add-user-body {
    height: 400px !important;
  }

  .confirm-reset-pwd-box .modal-title {
    font-size: 16px;
    font-weight: bold;
    color: #262626;
    line-height: 24px;
  }

  .confirm-reset-pwd-box .modal-content {
    font-size: 14px;
    font-weight: 400;
    color: #262626;
    line-height: 22px;
    white-space: nowrap;
  }

  .ant-table-body::-webkit-scrollbar {
    width: 10px;
  }

  //修改 滚动条的 下面 的 样式
  .ant-table-body::-webkit-scrollbar-track {
    background-color: transparent;
  }

  //修改 滑块
  .ant-table-body::-webkit-scrollbar-thumb {
    width: 5px !important;
    background-color: #bbbdbf;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
  }

  .ant-input::-webkit-outer-spin-button,
  .ant-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
  }

  .btn-list .ant-upload, .operation .ant-upload {
    border: none;
    background: none;
  }

  .btn-list .ant-upload-drag-container, .operation .ant-upload-drag-container {
    display: flex;
  }

  .btn-list .ant-upload-list {
    display: none;
  }

  .is-select p {
    color: @selectColor !important;
  }

  .is-select svg path {
    stroke: @selectColor;
  }

  .is-select svg polygon {
    stroke: @selectColor;
  }

  .banner-empty .ant-empty {
    display: none !important;
  }

  .banner-empty .ant-table-placeholder {
    height: 100px;
  }

  .modal .ant-modal-body > section {
    width: 100%;
  }
}
</style>
